<template>
  <div>
    
        <el-form-item label="店内照片" prop="shopImg">
            <el-upload :action="action"
                :show-file-list="false"  list-type="picture-card" ref="uploadFileDc"
                multiple :on-success="handleShopLogo">
                <i class="el-icon-plus"></i>
            </el-upload>
            <button class="seeImg" @click="lookImg = true">查看图片</button>
            <el-dialog title="点击图片可删除" :visible.sync="lookImg">
                <div class="imgBox">
                    <span v-for="item in imageUrl" :key="item.id" @click="handleRemoveImg(item)">
                        <img :src="item" align="middle" alt="" width="200">
                    </span>
                </div>
            </el-dialog>
            <el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body>
                <div class="cropper-content">
                    <div class="cropper" style="text-align:center">
                        <vueCropper
                            ref="cropper"
                            :img="option.img"
                            :outputSize="option.outputSize"
                            :outputType="option.outputType"
                            :info="option.info"
                            :canScale="option.canScale"
                            :autoCrop="option.autoCrop"
                            :autoCropWidth="option.autoCropWidth"
                            :autoCropHeight="option.autoCropHeight"
                            :fixed="option.fixed"
                            :fixedBox="option.fixedBox"
                            :fixedNumber="option.fixedNumber"
                        ></vueCropper>
                    </div>
                    <div class="Tips">滚轮可以放大缩小图片</div>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="rotateLeftHandle">左旋转</el-button>
                    <el-button @click="rotateRightHandle">右旋转</el-button>
                    <el-button @click="changeScaleHandle(1)">放大</el-button>
                    <el-button @click="changeScaleHandle(-1)">缩小</el-button>
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="primary" @click="finish">确认</el-button>
                </div>
            </el-dialog>
            <!-- 为了方便先用垃圾代码代替一下 -->
            <div class="exampleBox">
                <div class="triangle"></div>
                <div class="exampleContent">
                    <div class="exampleContentImg">
                        <div class="img" @click="exampleVisible1 = true"></div>
                    </div>
                    <div class="exampleContentImg2">
                        <div class="img" @click="exampleVisible2 = true"></div>
                    </div>
                    <div class="exampleContentText">
                    <div class="top">
                        <p class="radius"></p>
                        <p class="text">请上传清晰的店内图</p>
                    </div>
                    <div class="bottom">
                        <p class="radius"></p>
                        <p class="text">可上传扫描件或清晰完整的照片</p>
                    </div>
                    </div>
                </div>
            </div>
            <el-dialog title="示例图片" :visible.sync="exampleVisible1" append-to-body>
                <div class="dialogImg1">
                    <img src="../../assets/images/shopImg1.png" alt="">
                </div>
            </el-dialog>
            <el-dialog title="示例图片" :visible.sync="exampleVisible2" append-to-body>
                <div class="dialogImg2">
                    <img src="../../assets/images/shopImg2.jpg" alt="">
                </div>
            </el-dialog>
        </el-form-item>
    
  </div>
</template>
<script>
import {VueCropper} from 'vue-cropper'
import { listSearchMixin } from "@/config/mixin";
import api from "@/api";
export default {
  mixins: [listSearchMixin],
  components: {
    VueCropper
  },
  data(){
    return{
        action: api.upload,
        imageUrl: [],
        dialogVisible: false,
        lookImg: false,
        exampleVisible1: false,
        exampleVisible2: false,
        // 裁剪组件的基础配置option
        option: {
            img: '', // 裁剪图片的地址
            info: true, // 裁剪框的大小信息
            outputSize: 0.8, // 裁剪生成图片的质量
            outputType: 'jpeg', // 裁剪生成图片的格式
            canScale: true, // 图片是否允许滚轮缩放
            autoCrop: true, // 是否默认生成截图框
            autoCropWidth: 200, // 默认生成截图框宽度
            autoCropHeight: 200, // 默认生成截图框高度
            fixedBox: true, // 固定截图框大小 不允许改变
            fixed: true, // 是否开启截图框宽高固定比例
            fixedNumber: [1, 1], // 截图框的宽高比例
            full: true, // 是否输出原图比例的截图
            canMoveBox: false, // 截图框能否拖动
            original: false, // 上传图片按照原始比例渲染
            centerBox: false, // 截图框是否被限制在图片里面
            infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
            canMove:true,
        },
        picsList: [], //页面显示的数组
        // 防止重复提交
        fileinfo:{}
        }
  },
    methods: {
        handleRemoveImg (res) {//店内照片删除功能
            console.log(this.limitPic)
            for(var i = 0; i < this.imageUrl.length; i++) {
                if(this.imageUrl[i] == res) {
                    this.imageUrl.splice(i,1)
                    this.$emit('shopImgChild', this.imageUrl);
                    return
                }
            }
        },
        handleShopLogo(res, file) {//店铺logo
        console.log(res)
            // if(res.code == '') {
            //     let shopImg = res.data.url
            //     this.imageUrl.push(shopImg)
            //     this.$emit('shopImgChild', this.imageUrl);
            // }else {
            //     let uid = this.fileinfo.uid // 去除文件列表失败文件
            //     let idx = this.$refs.uploadFileDc.uploadFiles.findIndex(item => item.uid === uid) // 去除文件列表失败文件（uploadFiles为el-upload中的ref值）
            //     this.$refs.uploadFileDc.uploadFiles.splice(idx, 1) // 去除文件列表失败文件
            //     this.$message.error('图片格式不正确!');
            // }
            // 上传成功后将图片地址赋值给裁剪框显示图片
            
            if(this.imageUrl.length <= 1) {
                this.$nextTick(() => {
                    this.option.img = URL.createObjectURL(file.raw);
                    this.fileinfo = res
                    this.dialogVisible = true
                })
            }else {    
                this.$message.warning(`请最多上传2个文件。`);
            }
        },
        changeScaleHandle(num) {
            num = num || 1;
            this.$refs.cropper.changeScale(num);
        },
        // 左旋转
        rotateLeftHandle() {
            this.$refs.cropper.rotateLeft();
        },
        // 右旋转
        rotateRightHandle() {
            this.$refs.cropper.rotateRight();
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg'||file.type==='image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;
        
            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        cancel(res) {
            let uid = this.fileinfo.uid // 去除文件列表失败文件
            let idx = this.$refs.uploadFileDc.uploadFiles.findIndex(item => item.uid === uid) // 去除文件列表失败文件（uploadFiles为el-upload中的ref值）
            this.$refs.uploadFileDc.uploadFiles.splice(idx, 1) // 去除文件列表失败文件
            this.dialogVisible = false
        },
        finish(res) {
            this.$refs.cropper.getCropBlob((data) => {
                let picFile = new File([data], `${(new Date).getTime()}.png`);
                console.log(picFile)
                let fd = new FormData()
                fd.append('file', picFile)
                console.log(fd)
                let params = {
                url: this.action,
                method: 'POST',
                data: fd
                }
                this.sendReq(params, res => {
                    console.log(res)
                    this.loading = true
                    this.dialogVisible = false
                    this.lookImg = true
                    let shopImg = res.data.url
                    this.imageUrl.push(shopImg)
                    this.$emit('shopImgChild', this.imageUrl);
                })
            })
            // this.$refs.cropper.getCropBlob((data) => {
            //     console.log(fileName)
            //     let img = URL.createObjectURL(data)
            //     this.imageUrl.push(img)
            //     this.dialogVisible = false
            //     console.log(this.imageUrl)
            //     this.$emit('shopImgChild', this.imageUrl);
                
            // })
        }
    }
}
</script>
<style  lang="scss" scoped>
    .seeImg {
        background-color: #4194f6;
        border: none;
        color: white;
        padding: 8px 15px;
        text-align: center;
        border-radius: 3px;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
    }
    .imgBox {
        overflow: hidden;
        width: 800px;
        span {
            float: left;
            img {
                width: 148px;
                height: 148px;
                margin-left: 10px;
            }
        }
    }
    .dialogImg1 {
        img {
            max-width: 100%;
        }
    }
    .dialogImg2 {
        img {
            max-width: 100%;
        }
    }
    .exampleBox {
        width: 716px;
        height: 192px;
        .exampleContent{
            position: relative;
            top:10px;
            right:0px;
            width:714px;
            height:160px;
            padding:8px;
            background-color: #F7F7F7;
            border: #CACACA solid 1px;
            border-radius: 10px;
            .exampleContentImg {
                width: 140px;
                height: 140px;
                background: url(../../assets/images/shopImg1.png) no-repeat 0 0;
                background-size:100% 100%;
                float: left;
                margin-left: 20px;
                margin-top: 10px;
                position: relative;
                .img {
                    width: 60px;
                    height: 27px;
                    background: url(../../assets/images/example@2x.png) no-repeat 0 0;
                    background-size:100% 100%;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                }
            }
            .exampleContentImg2 {
                width: 140px;
                height: 140px;
                background: url(../../assets/images/shopImg2.jpg) no-repeat 0 0;
                background-size:100% 100%;
                float: left;
                margin-left: 20px;
                margin-top: 10px;
                position: relative;
                .img {
                    width: 60px;
                    height: 27px;
                    background: url(../../assets/images/example@2x.png) no-repeat 0 0;
                    background-size:100% 100%;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                }
            }
            .exampleContentText {
                float: left;
                margin-top: 21px;
                margin-left: 20px;
                .top {
                    overflow: hidden;
                }
                .radius {
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background: #999999;
                    float: left;
                    position: relative;
                    top: 16px;
                }
                .text {
                    float: left;
                    margin-left: 11px;
                    font-size: 20px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #666666;
                }
            }
        }
        .exampleContent:before{
            box-sizing: content-box;
            width: 0px;
            height: 0px;
            position: absolute;
            top: -16px;;
            left:88px;
            padding:0;
            border-bottom:8px solid #F7F7F7;
            border-top:8px solid transparent;
            border-left:8px solid transparent;
            border-right:8px solid transparent;
            display: block;
            content:'';
            z-index: 12;
        }
        .exampleContent:after{
            box-sizing: content-box;
            width: 0px;
            height: 0px;
            position: absolute;
            top: -18px;;
            left:87px;
            padding:0;
            border-bottom:9px solid #CACACA;
            border-top:9px solid transparent;
            border-left:9px solid transparent;
            border-right:9px solid transparent;
            display: block;
            content:'';
            z-index:10
        }
    }
    .tipsText {
        width: 100px;
    }
    .Tips {
        font-size: 16px;
        color: red;
    }
    .cropper-content{
        width:500px;height:500px;background: pink;
    }
    .cropper{
        width:500px;
        height:500px;
        background: yellow;
    }
</style>